<template>
	<view class="container">
		<view class="addr">
			<view class="addr-line b-b">
				<text class="title">经营范围</text>
				<view class="value">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name" class="picker">
						<input placeholder="请选择经营范围"  :value="index==-1  ?'' :array[index].name" class="value"></input>
					</picker>
					<text class="yticon icon-xia"></text>
				</view>
			</view>
			<view class="addr-line b-b">
				<text class="title">让利</text>
				<view class="value">
					<picker @change="bindPickerChange_rl" :value="rangli" :range="rangliarray" range-key="text" class="picker">
						<input placeholder="请选择让利"  :value="rangli==0  ?'' :rangliarray[rangli].text" class="value"></input>
					</picker>
					<text class="yticon icon-xia"></text>
				</view>
			</view>
			<view class="addr-line b-b">
				<text class="title">店铺简介</text>
				<textarea class="value-textarea" v-model="shopInfo.shop_dec" placeholder="简单介绍下自己的店铺吧~(100字以内) "></textarea>
			</view>
			<view class="addr-line b-b">
				<text class="title">商家电话</text>
				<input type="number" placeholder="请输入商家电话" v-model="shopInfo.mobile" class="mobile-value"></input>
			</view>
			<view class="addr-line b-b">
				<text class="title">营业时间</text>
				<view class="value">
					<picker mode="multiSelector" @change="bindMultiPicker" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" class="multipicker">
						<input placeholder="请选择营业时间" v-model="shopInfo.open_shijian"  class="value"></input>
					</picker>
				</view>
			</view>
			<view class="addr-line b-b">
				<text class="title">身份证姓名</text>
				<input placeholder="请输入姓名" type="text" class="value" v-model="shopInfo.name" />
			</view>
			<view class="addr-line b-b">
				<text class="title">身份证号码</text>
				<input placeholder="请输入身份证号码" type="text" class="value" v-model="shopInfo.cardid" />
			</view>
			<view class="addr-line b-b">
				<text class="title">营业执照号</text>
				<input placeholder="请输入营业执照号" type="text" class="value" v-model="shopInfo.license_num" />
			</view>
			

		</view>
		<text class="mix-btn" @click="next">下一步</text>
	</view>
</template>

<script>
	import {
	    mapState 
	} from 'vuex';  
	export default {
		data() {
			return {
				array:[],
				index:-1,
				rate_index: -1,
				shopInfo:{},
				pagenum:0,
				multiIndex: [0, 0],
				rangli:0,
				multiArray: [
					['00:00', '01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00'],
					['00:00', '01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00']
				],
				saletime:'',
				type:0,
				rangliarray:[
							{ value: 0, text: "0" },
					        { value: 1, text: "3%" },
					        { value: 2, text: "4%" },	
							{ value: 3, text: "5%" },	
							{ value: 4, text: "6%" },	
							{ value: 5, text: "7%" },	
							{ value: 6, text: "8%" },	
							{ value: 7, text: "9%" },	
							{ value: 8, text: "10%" },	
							{ value: 9, text: "11%" },	
							{ value: 10, text: "12%" },	
							{ value: 11, text: "13%" },
							{ value: 12, text: "14%" },
							{ value: 13, text: "15%" },
							{ value: 14, text: "16%" },
							{ value: 15, text: "17%" },
							{ value: 16, text: "18%" },
							{ value: 17, text: "19%" },
							{ value: 18, text: "20%" },
							{ value: 19, text: "23%" },
							{ value: 20, text: "25%" },
							{ value: 21, text: "30%" },
							
				]
			};
		},
		onLoad(option){
			
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			loadData(){
				this.$api.get({
					url: '/wanlshop/Small/shoptype',
					success: res => {
						this.array = res;
						let _this=this;
						_this.$api.get({
							url: '/wanlshop/Small/shopinfo',
							success: ress => {
								_this.shopInfo = ress
								// console.log(_this.index)
								_this.rangli=_this.shopInfo.rangli
									_this.array.forEach((item,index) => {
										
										if(_this.shopInfo.shoptype_id==item.id){
											_this.index = index
										}
									})
								}
								})
						}
						})
				
			},
			bindMultiPicker(){
				this.shopInfo.open_shijian = this.multiArray[0][this.multiIndex[0]] + " - " + this.multiArray[1][this.multiIndex[1]];
				console.log(this.shopInfo.open_shijian);
			},
			bindMultiPickerColumnChange: function(e) {
				this.multiIndex[e.detail.column] = e.detail.value
			},
			async bindPickerChange(e) {
				// let _this=this;
				
				this.index = e.target.value
				
				console.log(this.index)
					// this.index = this.array[e.target.value].shoptype_id;
				
			},
			bindPickerChange_r(e) {
				if(e.target.value == -1){
					this.rate_index = 0;
				}else{
					this.rate_index = e.target.value;
				}
			},
			bindPickerChange_rl(e) {
					this.rangli = e.target.value;
				
			},
			next(){
				console.log(this.index)
				if(this.index <0){
					this.$wanlshop.msg("请选择经营范围!");
					return;
				}
				
				if(this.shopInfo.name == ''){
					this.$wanlshop.msg("请填写身份证姓名!");
					return;
				}
				if(this.shopInfo.card_id == ''){
					this.$wanlshop.msg("请填写身份证号码!");
					return;
				}
				if(this.shopInfo.license_num == ''){
					this.$wanlshop.msg("请填写营业执照号!");
					return;
				}
				
				if(this.shopInfo.mobile== ''){
					this.$wanlshop.msg("请填写商家电话!");
					return;
				}
				if(this.shopInfo.open_shijian == ''){
					this.$wanlshop.msg("请选择营业时间!");
					return;
				}
				
				if(this.shopInfo.shop_dec.length > 100){
					this.$wanlshop.msg("请将店铺简介字数控制在100字以内!");
					return;
				}
				this.$api.post({
					url:'/wanlshop/Small/MerchantStep2',
					data: {
						"index":this.array[this.index].id,
						"shop_dec":this.shopInfo.shop_dec,
						"mobile":this.shopInfo.mobile,
						"open_shijian":this.shopInfo.open_shijian,
						"name":this.shopInfo.name,
						"cardid":this.shopInfo.cardid,
						"license_num":this.shopInfo.license_num,
						'rangli':this.rangli
					},
					success: res => {
						uni.navigateTo({
							url:'/pages/user/merchant/orderstep3?pagenum=' + this.pagenum + '&type=' + this.type
						})
					}
					})
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	.addr{
		margin: 20upx 25upx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		
		.addr-line{
			display: flex;
			flex-direction: row;
			position:relative;
			padding: 0 20upx;
			color:#75787d;
			font-size: $font-base;
			.title{
				width: 30%;
				height: 100upx;
				line-height: 100upx;
			}
			.mobile-value{
				width: 70%;
				height: 100upx;
				font-size: $font-base;
			}
			.value{
				width: 70%;
				height: 100upx;
				display: flex;
				flex-direction: row;
				font-size: $font-base;
				.picker{
					width: 90%;
				}
				.multipicker{
					width: 100%;
				}
				.valueEx{
					width: 78%;
					height: 100upx;
					line-height: 100upx;
					padding-right: 50upx;
					font-size: $font-base;
				}
				.valueFix{
					width: 22%;
					height: 100upx;
					line-height: 100upx;
					font-size: $font-base;
				}
				&.b-b:after{
					left: 0upx;
				}
			}
			.value-textarea{
				padding-top: 30rpx;
				width: 70%;
				height: 200upx;
				line-height: normal;
				font-size: $font-base;
			}
			&.b-b:after{
				left: 0upx;
			}
		}
	}
	
	.icon-xia{
		font-size: $font-lg;
		color: $font-color-light;
		flex: 1;
		text-align: right;
		line-height: 100upx;
	}
	.icon-you{
		font-size: $font-lg;
		color: $font-color-light;
		flex: 1;
		text-align: right;
		line-height: 100upx;
	}
</style>
